<template>
  <div class="user-dropdown-panel">
    <!-- 用户信息头部 -->
    <div class="dropdown-header">
      <div class="dropdown-avatar">
        <a-avatar :src="getMinioFileUrl(userInfo?.filePath || userInfo?.avatar)" :size="60" />
      </div>
      <div class="dropdown-user-info">
        <div class="dropdown-username">{{ userInfo?.name }}</div>
        <div class="dropdown-stats">
          <span>关注 330</span>
          <span>粉丝 5</span>
        </div>
      </div>
    </div>
    
    <!-- 功能菜单 -->
    <div class="dropdown-sections">
      <div class="dropdown-section">
        <div class="section-header">
          <HeartOutlined />
          <span>我的喜欢</span>
          <span class="section-count">1282 ></span>
        </div>
        <div class="section-previews">
          <div class="preview-item">
            <img src="https://via.placeholder.com/60x40/ff6b6b/ffffff?text=1" alt="预览" />
          </div>
          <div class="preview-item">
            <img src="https://via.placeholder.com/60x40/4ecdc4/ffffff?text=2" alt="预览" />
          </div>
          <div class="preview-item">
            <img src="https://via.placeholder.com/60x40/45b7d1/ffffff?text=3" alt="预览" />
          </div>
        </div>
      </div>
      
      <div class="dropdown-section">
        <div class="section-header">
          <StarOutlined />
          <span>我的收藏</span>
          <span class="section-count">154 ></span>
        </div>
      </div>
      
      <div class="dropdown-section">
        <div class="section-header">
          <ClockCircleOutlined />
          <span>观看历史</span>
          <span class="section-count">30天内 ></span>
        </div>
      </div>
      
      <div class="dropdown-section">
        <div class="section-header">
          <PlayCircleOutlined />
          <span>稍后再看</span>
          <span class="section-count">2 ></span>
        </div>
      </div>
      
      <div class="dropdown-section">
        <div class="section-header">
          <VideoCameraOutlined />
          <span>我的作品</span>
          <span class="section-count">0 ></span>
        </div>
      </div>
      
      <div class="dropdown-section">
        <div class="section-header">
          <BellOutlined />
          <span>我的预约</span>
        </div>
      </div>
    <div class="dropdown-section">
        <div class="section-header" @click="goToOrders">
          <PlayCircleOutlined />
          <span>我的订单</span>
          <span class="section-count"> ></span>
        </div>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="dropdown-actions">
      <a-button type="text" class="action-btn" @click="goToProfile">
        <UserOutlined />
        个人中心
      </a-button>
      <a-button type="text" class="action-btn" @click="showChangePassword">
        <LockOutlined />
        修改密码
      </a-button>
      <a-button type="text" class="action-btn" @click="handleLogout">
        <LogoutOutlined />
        退出登录
      </a-button>
    </div>

    <!-- 修改密码模态框 -->
    <ChangePasswordModal
      v-model:open="changePasswordVisible"
      @password-changed="handlePasswordChanged"
    />
  </div>
</template>

<script setup lang="ts">
import {
  HeartOutlined,
  StarOutlined,
  ClockCircleOutlined,
  PlayCircleOutlined,
  VideoCameraOutlined,
  BellOutlined,
  UserOutlined,
  LogoutOutlined,
  LockOutlined
} from '@ant-design/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getOrdersByUserId } from '@/api/mall/bizOrderController'
import ChangePasswordModal from '@/components/ChangePasswordModal.vue'
const router = useRouter()
const goToOrders = () => {
  // 关闭下拉菜单（如果有的话）
  emit('closeDropdown')
  
  // 跳转到订单页面
  router.push('/user/orders')
}

// 获取MinIO文件完整URL的工具函数
const getMinioFileUrl = (filePath?: string): string => {
  if (!filePath) {
    return 'https://via.placeholder.com/60x60'
  }
  
  // 如果已经是完整URL，直接返回
  if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
    return filePath
  }
  
  // 否则拼接MinIO基础URL
  const minioUrl = import.meta.env.VITE_MINIO_URL || 'http://172.172.2.99:9000'
  return `${minioUrl}${filePath}`
}

// Props
interface UserInfo {
  name?: string
  avatar?: string
  filePath?: string
}

interface Props {
  userInfo?: UserInfo
}

const props = withDefaults(defineProps<Props>(), {
  userInfo: () => ({})
})

// Emits
const emit = defineEmits<{
  goToProfile: []
  logout: []
}>()

// 方法
const goToProfile = () => {
  emit('goToProfile')
}

const handleLogout = () => {
  emit('logout')
}

// 修改密码相关
const changePasswordVisible = ref(false)

const showChangePassword = () => {
  changePasswordVisible.value = true
}

const handlePasswordChanged = () => {
  changePasswordVisible.value = false
  // 密码修改成功后，用户会被重定向到登录页面
  // 这里不需要额外的处理，因为 ChangePasswordModal 已经处理了重定向
  console.log('密码已更改，用户将被重定向到登录页面')
}
</script>

<style scoped>
.user-dropdown-panel {
  width: 320px;
  max-height: 600px;
  background: rgba(15, 52, 96, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dropdown-header {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.dropdown-avatar {
  margin-right: 16px;
}

.dropdown-user-info {
  flex: 1;
}

.dropdown-username {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.dropdown-stats {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #999;
}

.dropdown-sections {
  padding: 16px 20px;
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

.dropdown-sections::-webkit-scrollbar {
  width: 6px;
}

.dropdown-sections::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.dropdown-sections::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.dropdown-sections::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.dropdown-sections {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.dropdown-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdown-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s;
}

.section-header:hover {
  color: #ff6b6b;
}

.section-header .section-count {
  font-size: 14px;
  color: #999;
}

.section-previews {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.preview-item {
  flex: 0 0 auto;
  width: 60px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dropdown-actions {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.action-btn {
  width: 100%;
  text-align: left;
  color: #fff;
  border: none;
  background: transparent;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ff6b6b;
}
</style>
